import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { InputItem, NoticeBar ,Icon} from 'antd-mobile'
import { FooterBar } from 'component/footer'
import { CommonHeader } from 'component/header'
import { TopAccount } from 'component/trade'
import { TopNavBar } from 'component/common'
import { PositionDetails, MarketList, PositionProfit, GuadanList, OrderDirection, ChoseButton} from './'



class PositionPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      active: 1,
    }
    this.onClick = this.onClick.bind(this)
  }
  onClick(i) {
    this.setState({
      active : i
    })

  }
  render() {
    return (
      <div>
        <NoticeBar
          mode="closable"
          icon={null}
          className="rt-notice-bar"
        >
          <FormattedMessage
            id='notice_noChange'
          />
          <span className="-notice_change">
            <FormattedMessage
              id='notice_change'
            />
          </span>
        </NoticeBar>
        <div className="cm-scrollable-container -background">
          <div className="rt-bond">
            <div className="-green">
              <div className="-inner" style={{width:'90%'}}><span>
                <FormattedMessage
                  id='availableFunds'
                />
              90%
              </span></div>
            </div>
            <div className="-new">
              <Icon type={require('static/svg/m_new.svg')}/>
              <span>
                <FormattedMessage
                  id='jiancang'
                />
              </span>
            </div>
          </div>
          <TopAccount/>
          <TopNavBar
            onClick={(i) => {
              this.onClick(i)
            }
          }
            threeNode={{
              topIcon: <Icon type={require('static/svg/m1_3.svg')} />,
              topIconactive: <Icon type={require('static/svg/icon_59.svg')} />,
              name: "账户损益"
            }}
            
          />
          {
            this.state.active == 1 ? 
            <MarketList/> :
            ( this.state.active == 2 ? <GuadanList/> : <PositionProfit/>)
          }

        </div>
        <FooterBar activeIndex={1}/>
      </div>
    )
  }
}

export default PositionPage